<template>
  <div class="home">

    <br/>

    <el-card shadow="always">
      资产管理 / 软件资产管理
    </el-card>


    <br>

    <!-- 查询条件 -->
    <el-card shadow="always">
      区域: 
        <el-select v-model="value5" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      业务名称: <el-input v-model="input" style="width: 220px;" placeholder="模糊查询(软件名称 = 虚拟机名称)"></el-input>
      <br>
      <br>
      物理机IP: <el-input v-model="input" style="width: 220px;" placeholder="请输入物理机IP"></el-input>
      虚拟机IP: <el-input v-model="input" style="width: 220px;" placeholder="请输入虚拟机IP"></el-input>
      <el-button type="primary" >查询</el-button>
    </el-card>


    <br />
    <el-button type="primary" @click="dialogVisible1 = true, title='新增'"> 新增 </el-button>
    <el-button type="success"> 导入 </el-button>
    <el-button type="success"> 批量刷新 </el-button>

    <br />
    <br>

    <!-- 详情 -->
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="90%">
        <el-card shadow="always">
          <el-col :span="24"> <h3>主机信息</h3></el-col>
          <el-col :span="12">主机IP: 192.168.0.1</el-col>
          <el-col :span="12">主机类型: 虚拟机</el-col>
          <el-col :span="12">区域: 昌平数据中心</el-col>
          <el-col :span="12">链路: 链路一</el-col>
          <el-col :span="12">机房: 机房一</el-col>


         



          <el-col :span="24"> <h3>系统信息</h3></el-col>
          <el-col :span="12">操作系统名称: win7x64</el-col>
          <el-col :span="12">电源状态: 开启</el-col>


          <el-col :span="24"> <h3>漏洞信息</h3></el-col>
          <el-table
              :data="tableData3"
              style="width: 100%">

              <el-table-column
                prop="name1"
                label="漏洞名称"
                width="180">
              </el-table-column>

              <el-table-column
                prop="name2"
                label="漏洞类型"
                width="180">
              </el-table-column>

              <el-table-column
                prop="name3"
                label="漏洞级别"
                width="180">
              </el-table-column>

              <el-table-column
                prop="name4"
                label="发现时间"
                width="180">
              </el-table-column>
            </el-table>




          <el-col :span="24"> <h3>网卡: </h3> </el-col>
          <el-col :span="24">
            <el-table
              :data="tableData2"
              style="width: 100%">

              <el-table-column
                prop="name2"
                label="接口名称(物理机/虚拟机)"
                width="180">
              </el-table-column>

              <el-table-column
                prop="name3"
                label="MAC地址"
                width="180">
              </el-table-column>

              <el-table-column
                prop="name4"
                label="接口状态"
                width="180">
              </el-table-column>

              <el-table-column
                prop="name5"
                label="描述"
                width="180">
              </el-table-column>

              <el-table-column
                prop="name6"
                label="vlan"
                width="180">
              </el-table-column>
              

            </el-table>
          </el-col>



          <el-col :span="24">&nbsp;</el-col>
          <el-col :span="8">CPU:  2路志强3.8g  <img src="./imgs/m1.png" alt=""></el-col>
          <el-col :span="8">内存:  8.8G/16G <img src="./imgs/m1.png" alt=""> </el-col>
          <el-col :span="8">磁盘:  88G/166G<img src="./imgs/m1.png" alt=""></el-col>



          <el-col :span="24"> <h3>业务信息</h3></el-col>
          <el-col :span="12">业务名称: 中石油策略管理</el-col>
          <el-col :span="12">URL: HTTPS://1.1.1.1:8080/LOGIN.JSP</el-col>
          <el-col :span="12">真实IP: 192.168.0.2、192.168.0.3、192.168.0.4</el-col>
          <el-col :span="12">虚拟IP: 192.168.0.99</el-col>
          <el-col :span="12">用户名: root</el-col>
          <el-col :span="12">密码: *****</el-col>


          <el-col :span="24"> <h3>厂商信息</h3></el-col>
          <el-col :span="12">厂商: 启明星辰</el-col>
          <el-col :span="12">姓名: 张三</el-col>
          <el-col :span="12">邮箱: abc@123.com</el-col>
          <el-col :span="12">电话: 15566667777</el-col>



          <el-col :span="24"> <h3>运维信息</h3></el-col>
          <el-col :span="12">项目名称: 中石油策略管理</el-col>
          <el-col :span="12">姓名: 李四</el-col>
          <el-col :span="12">邮箱: abc@123.com</el-col>
          <el-col :span="12">电话: 15566667777</el-col>
          

          <!-- 表格 副 -->
          <el-table
            :data="tableData1"
            style="width: 100%">

            <el-table-column
              prop="name1"
              label="组件名"
              width="180">
            </el-table-column>

            <el-table-column
              prop="name2"
              label="软件"
              width="180">
            </el-table-column>

            <el-table-column
              prop="name3"
              label="使用情况"
              width="180">
            </el-table-column>

          </el-table>



          


          

        </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 表格 主-->
    <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        prop="aaa000"
        label="业务名称"
        width="180">
      </el-table-column>

      <!-- <el-table-column
        prop="aaa111"
        label="软件名称"
        width="180">
      </el-table-column> -->

      <el-table-column
        prop="aaa222"
        label="所属区域"
        width="180">
      </el-table-column>
      
      <el-table-column
        prop="aaa333"
        label="所属链路">
      </el-table-column>

      <el-table-column
        prop="aaa444"
        label="访问地址">
      </el-table-column>


      
      <el-table-column
        prop="aaa555"
        label="物理机IP">
      </el-table-column>



      <el-table-column
        prop="aaa999"
        label="虚拟机IP">
      </el-table-column>
      

      <el-table-column
        prop="aaa777"
        label="虚拟机账号">
      </el-table-column>


      <el-table-column
        prop="aaa888"
        label="虚拟机密码">
      </el-table-column>


      <el-table-column
        prop="aaa10"
        label="服务器类型">
      </el-table-column>


      <el-table-column  align="center" width="240" label="操作">
        <template >
          <el-button type="text"  @click="dialogVisible = true, title='详情'">详情</el-button>
          <el-button type="text"  @click="dialogVisible1 = true, title='修改'">修改</el-button>
          <el-button type="text" >删除</el-button>
          <el-button type="text" >刷新(vcenter类型才支持)</el-button>
        </template>
      </el-table-column>


    </el-table>

    <!-- 新增、修改 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible1"
      width="30%">

        区域: 
        <el-select v-model="value5" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <br>
        <br>

        链路: 
        <el-select v-model="value5" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <br>
        <br>

        服务器类型: 
        <el-select v-model="value6" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <br>
        <br>


        业务名: <el-input v-model="datas.add1" style="width: 200px" placeholder="请输入内容"></el-input>
        <br>
        <br>
        虚拟机IP: <el-input v-model="datas.add4"  style="width: 200px" placeholder="请输入内容"></el-input>
        <br>
        <br>
        虚拟机账号: <el-input v-model="datas.add5"  style="width: 200px" placeholder="请输入内容"></el-input>
        <br>
        <br>
        虚拟机密码: <el-input v-model="datas.add6"  style="width: 200px" placeholder="请输入内容"></el-input>
        


      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>



    <br>
    <br>

    <!-- 备注 -->
    <el-card shadow="always">
      备注事项: 
      <br>
      <br>
      1. 软件名称 = 虚拟机名称 
      <br>
      <br>
      2. 备注字段: 发布服务器(比如nginx)及版本、 
      <br>
      <br>
      3. 虚拟IP抓取多个值, 可修改(支持多选)
      <br>
      <br>
      4. 导入功能的表头字段
      <br>
      <br>
      5. 表格表头可自由调整位置
    </el-card>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      title: '新增',
      options: [{
          value: '选项1',
          label: 'vcenter'
        },],
      value5: '',
      value6: '选项1',
      input: '',
      options1: [{
          value: '选项1',
          label: '昌平数据中心'
        }, {
          value: '选项2',
          label: '东直门数据中心'
        }, {
          value: '选项3',
          label: 'XXX数据中心'
        }],
        options2: [{
          value: '选项1',
          label: '链路1'
        }, {
          value: '选项2',
          label: '链路2'
        }, {
          value: '选项3',
          label: '链路3'
        }],
      datas: {
        add1: 'vcenter',
        add2: '192.169.0.1',
        add3: '192.169.0.2',
        add4: '192.169.0.3',
        add5: 'root',
        add6: '****',
        add7: '',
        add8: '',

      },
      dialogVisible: false,
      dialogVisible1: false,
      tableData: [
        {
          aaa000: '策略管理平台',
          aaa111: 'elk',
          aaa222: '昌平数据中心',
          aaa333: '链路一',
          aaa444: 'URL',
          aaa555: '127.0.0.1',
          aaa777: 'zhu***01',
          aaa888: '******',
          aaa999: '127.0.0.2',
          aaa10: '物理服务器',
        },
        {
          aaa000: '财务系统',
          aaa111: 'nginx',
          aaa222: '昌平数据中心',
          aaa333: '链路一',
          aaa444: 'URL',
          aaa555: '127.0.0.1',
          aaa777: 'zhu***01',
          aaa888: '******',
          aaa999: '127.0.0.2',
          aaa10: 'vmserver服务器',
        },
        {
          aaa000: 'OA平台',
          aaa111: 'mySSqul',
          aaa222: '昌平数据中心',
          aaa333: '链路一',
          aaa444: 'URL',
          aaa555: '127.0.0.1',
          aaa777: 'zhu***01',
          aaa888: '******',
          aaa999: '127.0.0.2',
          aaa10: 'vcenter服务器',
        }
      ],
      tableData1: [
        {
          name1: '应用服务器',
          name2: 'nigix6.8',
          name3: 'session'
        },
        {
          name1: '数据库',
          name2: 'mysql6.8',
          name3: 'pool'
        },
        {
          name1: '组件3',
          name2: 'rabitmq3.2',
          name3: '延时'
        },
      ],

      tableData2: [
        {
          name2: 'vmnic0',
          name3: '06bc',
          name4: 'up',
          name5: 'vmnic0',
          name6: 'vlan300',
        }
      ],
      tableData3: [
        {
          name1: 'vmnic0',
          name2: '06bc',
          name3: 'up',
          name4: 'vmnic0',
          name5: 'vlan300'
        }
      ]



    }
  },
  methods: {
    
  }
}
</script>

<style scoped>
</style>
